<template>
    <div :style="{width:width+'px'}" id="textAreaDiv">
        <Input v-model="textAreaVal" class="text-area" type="textarea" clearable :rows="row" :placeholder="placeholder"
               @input="handleInputChange" :maxlength="maxLength" :disabled="disabled"/>
        <span class="remain-word">{{ valueLength }}/{{ maxLength }}</span>
    </div>
</template>

<script>
    const isEmpty = (str) => {
        if (str === '' || str === undefined || str === null) {
            return true
        }
        return false
    }

    export default {
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: String,
                default: ''
            },
            row: {
                type: Number,
                default: 3
            },
            maxLength: {
                type: Number,
                default: 512
            },
            width: {
                type: String,
                default: ""
            },
            disabled: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                default: ""
            },

        },
        data() {
            return {
                textAreaVal: ''
            }
        },
        computed: {
            // 计算当前文本框中内容的字数
            valueLength() {
                if (isEmpty(this.textAreaVal)) {
                    return 0
                }
                return this.textAreaVal.length
            }
        },
        watch: {
            // 监听value的变化
            value: {
                handler(val, oldVal) {
                    this.textAreaVal = val
                },
                immediate: true
            }
        },
        methods: {
            // 计算textAreaVal值，超过最大值则直接截断
            handleInputChange() {
                this.textAreaVal = this.textAreaVal.substring(0, this.maxLength)
                this.$emit('change', this.textAreaVal)
            }
        }
    }
</script>

<style scoped>
    #textAreaDiv {
        position: relative;
        display: inline-block;
    }

    .remain-word {
        position: absolute;
        right: 5px;
        bottom: -8px;
        color: #c5c8ce;
    }

    /deep/ textarea {
        resize: none;
    }

</style>
